<script lang="ts" setup>
import { useOffSetTopStore } from '@/stores/modules/offsetTop'
import { onMounted, ref } from 'vue'
import '@/views/page/AboutUs/font/iconfont.css'

const temRef = ref()
const offsetTop = ref(0)
const offsetTopStore = useOffSetTopStore()
const getOffSetTop = () => {
  offsetTop.value = temRef.value.offsetTop
  offsetTopStore.setOffSetTop('A', offsetTop.value)
}

const slideLeft = ref() // 虽然定义为const，但只要有ref，那么就能通过.value来修改它的值
const slideRight = ref()
const slidesLength = ref()
const slideHeight = ref()
const layoutEl = ref()
let activeSlideIndex = 0

const getParams = () => {
  slideLeft.value = document.querySelector('.slide-left')
  slideRight.value = document.querySelector('.slide-right')
  slidesLength.value = slideLeft.value.querySelectorAll('div').length - 2 //因为多加了两张图片，为了不影响其他图片的运行，所以最好这里一开始就减2，后面去减不方便
  layoutEl.value = document.querySelector('.layout')
  /**
   * .style.height 只会返回内联样式
   * 如果元素没有设置内联样式
   * 而是通过 CSS 样式表设置的高度
   * .style.height 将返回空字符串。
   * 此时可以用.offsetHeight
   */
  // slideHeight.value = slideLeft.value.style.height
  slideHeight.value = slideLeft.value.offsetHeight
}

const removeStyle = () => {
  slideLeft.value.style.transition = 'none'
  slideRight.value.style.transition = 'none'
}

const addStyle = () => {
  slideLeft.value.clientHeight
  slideRight.value.clientHeight
  slideLeft.value.style.transition = 'transform 0.5s ease-in-out'
  slideRight.value.style.transition = 'transform 0.5s ease-in-out'
}

const goto = () => {
  // translateY 的正方向是向上，而不是下意识的以为是向下
  slideLeft.value.style.transform = `translateY(${activeSlideIndex * slideHeight.value}px)`
  slideRight.value.style.transform = `translateY(${-activeSlideIndex * slideHeight.value}px)`
  console.log(activeSlideIndex)

  layoutEl.value.style.backgroundColor =
    slideLeft.value.querySelectorAll('div')[
      slidesLength.value - activeSlideIndex
    ].style.backgroundColor
}

const changeSlide = (direction) => {
  if (direction === 'up') {
    activeSlideIndex++
    if (activeSlideIndex > slidesLength.value - 1) {
      activeSlideIndex = -1
      removeStyle()
      goto()
      /**
       * 用于决定上或下滑动的是 activeSlideIndex 所以注意这里要++，这样才能再滑一次，而不是启动一次goto()就会滑动一次
       * 决定滑动的有两个：1.改变计数   2.改变样式也就是translateY
       * 注意translateY只是改变样式，并不代表就会滑动，滑动必须要两个步骤结合
       */
      activeSlideIndex++
      addStyle()
    }
  } else {
    activeSlideIndex--
    if (activeSlideIndex < 0) {
      activeSlideIndex = slidesLength.value
      removeStyle()
      goto()
      activeSlideIndex--
      addStyle()
    }
  }
  goto()
}

// 本地图片的展示难以用vue的动态更新
// const imgUrl = ref(`${'./images/02.png'}`)

onMounted(() => {
  getOffSetTop()
  getParams()
})
</script>

<template>
  <div class="layout" ref="temRef">
    <div class="slider-container wrapper">
      <div
        class="slide-left"
        :style="{ top: `${-slidesLength * slideHeight}px` }"
      >
        <div style="background-color: #191919">
          <h1>关于我们</h1>
          <p>
            我们是一家专注于行业软件定制及解决方案提供的公司，致力于为各类企业提供高效、创新的技术支持。凭借多年的行业经验和专业团队，我们能够深入理解客户的业务需求，设计出符合其特定要求的软件解决方案。我们的使命是帮助企业通过技术手段提升运营效率、优化业务流程，从而在竞争中脱颖而出。
            <br />
            <br />
            除了定制软件开发，我们还提供全面的解决方案咨询服务。我们与客户紧密合作，从业务流程的分析到技术选型，确保为客户提供最优的解决方案。无论是传统行业的数字化转型，还是新兴行业的创新应用，我们都能提供专业的指导和支持。我们的目标是通过先进的技术手段，帮助客户实现业务目标，提高市场竞争力。

            <br />
            <br />
            我们深知，优质的客户服务是成功的关键。因此，我们不仅在项目实施阶段提供全方位的支持，还在后期维护和技术支持上持续跟进。我们的服务团队随时待命，确保客户在使用过程中遇到的任何问题都能得到及时解决。我们相信，只有建立长期的合作关系，才能真正实现双赢。
            <br />
            <br />
            选择我们，您将获得的不仅是一个软件解决方案，更是一位值得信赖的合作伙伴。我们期待与您携手共进，共同迎接行业挑战，实现数字化转型的美好未来。
          </p>
          <button>立即联系我们</button>
        </div>
        <!--  -->
        <div style="background-color: #1d121a">
          <h1>星朔5</h1>
          <p>行业软件定制及解决方案提供商</p>
        </div>
        <div style="background-color: #19191b">
          <h1>星朔4</h1>
          <p>行业软件定制及解决方案提供商</p>
        </div>
        <div style="background-color: #070506">
          <h1>星朔3</h1>
          <p>行业软件定制及解决方案提供商</p>
        </div>
        <div style="background-color: #191919">
          <h1>星朔2</h1>
          <p>行业软件定制及解决方案提供商</p>
        </div>
        <div style="background-color: #191919">
          <h1>关于我们</h1>
          <p>
            我们是一家专注于行业软件定制及解决方案提供的公司，致力于为各类企业提供高效、创新的技术支持。凭借多年的行业经验和专业团队，我们能够深入理解客户的业务需求，设计出符合其特定要求的软件解决方案。我们的使命是帮助企业通过技术手段提升运营效率、优化业务流程，从而在竞争中脱颖而出。
            <br />
            <br />
            除了定制软件开发，我们还提供全面的解决方案咨询服务。我们与客户紧密合作，从业务流程的分析到技术选型，确保为客户提供最优的解决方案。无论是传统行业的数字化转型，还是新兴行业的创新应用，我们都能提供专业的指导和支持。我们的目标是通过先进的技术手段，帮助客户实现业务目标，提高市场竞争力。

            <br />
            <br />
            我们深知，优质的客户服务是成功的关键。因此，我们不仅在项目实施阶段提供全方位的支持，还在后期维护和技术支持上持续跟进。我们的服务团队随时待命，确保客户在使用过程中遇到的任何问题都能得到及时解决。我们相信，只有建立长期的合作关系，才能真正实现双赢。
            <br />
            <br />
            选择我们，您将获得的不仅是一个软件解决方案，更是一位值得信赖的合作伙伴。我们期待与您携手共进，共同迎接行业挑战，实现数字化转型的美好未来。
          </p>
          <button>立即联系我们</button>
        </div>
        <!--  -->
        <div style="background-color: #1d121a">
          <h1>星朔5</h1>
          <p>行业软件定制及解决方案提供商</p>
        </div>
      </div>
      <div class="slide-right" :style="{ top: `${-slideHeight}px` }">
        <div id="5"></div>
        <!--  -->
        <div id="1"></div>
        <div id="2"></div>
        <div id="3"></div>
        <div id="4"></div>
        <div id="5"></div>
        <!--  -->
        <div id="1"></div>
      </div>

      <div class="action-buttons">
        <button @click="changeSlide('down')" class="left-btn">
          <i class="iconfont icon-a-xiala2"></i>
        </button>
        <button @click="changeSlide('up')" class="right-btn">
          <i class="iconfont icon-a-xiala2"></i>
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.layout {
  background-color: #191919;
  transition: background-color 0.5s ease-in-out;
  ::-webkit-scrollbar {
    display: none;
  }
  box-sizing: border-box;
  min-width: 1270px;
  height: 670px;
  .slider-container {
    width: 1275px;
    /* 这里这个100%还是得写，不然不知道为什么有点儿空隙 */
    height: 100%;
    display: flex;
    overflow: hidden;
    position: relative;
    .slide-left {
      width: 40%;
      height: 100%;
      position: absolute;
      transition: transform 0.5s ease-in-out;
      & > div {
        padding: 47px 37px;
        width: 100%;
        height: 100%;
        color: #fff;
        background-color: #fcbb0787;
        h1 {
          font-size: 28px;
          margin-bottom: 28px;
        }
        p {
          font-size: 14px;
          color: #ffffffc6;
          line-height: 1.5;
        }
        button {
          cursor: pointer;
          padding: 10px 17px;
          background-color: #464343;
          color: #ffffffc6;
          border-radius: 5px;
          margin-top: 17px;
          &:hover {
            opacity: 0.8;
          }
        }
      }
    }
    .slide-right {
      width: 60%;
      height: 100%;
      position: absolute;
      left: 40%;
      top: 0;
      transition: transform 0.5s ease-in-out;
      & > div {
        width: 100%;
        height: 100%;
        &:nth-child(2),
        &:nth-child(7) {
          background: url('https://images.unsplash.com/photo-1729558598089-27f66be9603f?q=80&w=2535&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')
            no-repeat center / cover;
        }
        &:nth-child(3) {
          background: url('https://images.unsplash.com/photo-1728930684293-691453ac6f7b?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')
            no-repeat center / cover;
        }
        &:nth-child(4) {
          background: url('https://images.unsplash.com/photo-1729090896356-e8ed4e0bc121?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')
            no-repeat center / cover;
        }
        &:nth-child(5) {
          background: url('https://images.unsplash.com/photo-1729008013335-aec0b983d1d9?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')
            no-repeat center / cover;
        }
        &:nth-child(6),
        &:nth-child(1) {
          background: url('https://images.unsplash.com/photo-1729433321272-9243b22c5f6e?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')
            no-repeat center / cover;
        }
      }
    }
    .action-buttons {
      button {
        cursor: pointer;
        position: absolute;
        /* 具有相同层级的元素会根据它们在 HTML 中出现的顺序进行显示，所以这里不用加z-index */
        /* z-index: 100; */
        top: 50%;
        left: 40%;
        background-color: #c0bbba;
        display: flex;
        align-items: center;
        justify-content: center;
        color: red;
        padding: 8px 2px;
        i {
          font-size: 28px;
          line-height: 28px;
        }
      }
      .left-btn {
        transform: translateX(-100%);
        border-radius: 5px 0 0 5px;
      }
      .right-btn {
        transform: translateY(-100%) rotate(180deg);
        /* 这里因为旋转了180deg，所以 border-radius 设置是一样的 */
        border-radius: 5px 0 0 5px;
      }
    }
  }
}
</style>
